$(function () {

  // 修改头像后显示自己的头像
  axios.get('/my/userinfo').then(({ data: res }) => {
    // console.log(res.data);
    if (res.data.user_pic !== null) {
      $('.row1').html(`<div class="cropper-box">
     <img id="image" src="${res.data.user_pic}" style="width: 100%; height: 100%; object-fit: cover;" />
    </div>`)
    }
    
  })

  // 点击按钮触发input的点击事件
  $('#btnChooseImg').on('click', function () {
    $('#file').click()
  })

  let file = null;
  // 监听文件上传的change事件
  $('#file').on('change', function (e) {
    // console.dir(e.target.files);
    // 得到的图片的信息
    const files = e.target.files
    // 判断伪数组的长度是否为0
    if (files.length === 0) {
      return file = null
      
    }

    file = files[0];
  
    // 如果用户选择了图片 则把图片渲染到页面的img标签中
    // URL.createObjectURL() 函数接受一个文件 返回值是这个文件的URL地址
    const imgURL =URL.createObjectURL(files[0])

    // 把接受到的图片的路径插入到图片的src属性
    $('#image').attr('src',imgURL)
  })

  // 点击上传头像按钮
  $('#btnUploadImg').on('click', function () {
    // 判断是否接受图片
    if (!file) {
      layer.msg('请选择图片',{icon:2})
      return
    }

    // 1·把用户选择的图片文件，转为base64格式 查看webAPI接口文档 查看FileReader
    // 2·调用axios发送请求 上传头像
    // 3·如果头像上传成功，则重新刷新父页面
    // 构造一个函数 接受图片信息
    const fr = new FileReader()

    // 把获取的图片信息插入到创建的对象中
    fr.readAsDataURL(file)

    fr.addEventListener('load', function () {
      // console.log(fr.result);
        // 发送请求体 avatar ：base64格式
      axios.patch('/my/update/avatar', {
        avatar:fr.result
      }).then(({data: res})=>{
        if (res.code === 0) {
          // 提示图片上传成功信息 
          layer.msg(res.message, { icon: 1 })
          // 重新刷新父页面 让图片更新出来
          window.parent.info()
        }
      })
    })
  })

})